<template>
  <section class="todoapp">
    <!-- 3.使用组件 -->
    <!-- 驼峰命名的组件，在使用时可以转换为横杠分隔的方式，例如： -->
    <!-- MvcTop ==> mvc-top -->
    <mvc-top @content="add"></mvc-top>
    <!-- 因为todoList是一个引用类型（复杂类型）的数据 -->
    <!-- 所以在传递的时候，传递的是一个引用地址 -->
    <mvc-list :todo-arr="todoList" @complete="toggle" @del="del" @quanbuwancheng="quanbuwancheng"></mvc-list>
    <mvc-btm @clear="clear" @screening="screening" :total="sum"></mvc-btm>
  </section>
</template>
<script>
// 1.拆分组件，并引入
import MvcTop from "./top.vue";
import MvcList from "./list.vue";
import MvcBtm from "./btm.vue";
export default {
  name: "Home",
  // 2.挂载组件
  components: { MvcTop, MvcList, MvcBtm },
  // 列表数据我们选择存放在了父组件
  // 原因：方便数据的传递
  data() {
    return {
      allList: [],
      todoList: [],
      status: 0,
      flag: 0
    }
  },
  created() {
    // 组件创建完成后，读取本地存储
    this.allList = JSON.parse(localStorage.getItem("allList")) || [{
      title: '欢迎使用便签',
      completed: false,
      id: 1
    }];
    this.todoList = this.allList;
  },
  // 数据定义在什么地方，那么对数据操作的方法一般就要定义在什么地方
  methods: {
    toggle(item) {
      item.completed = !item.completed;
      this.reset();
    },
    add(val) {
      // 为了避免吗id的重复，我们优化了算法，使用最大id+1的方式
      if (val.trim() == "") return;
      let maxID = this.allList.reduce((tmp, item) => tmp > item.id ? tmp : item.id, 1);
      this.allList.push({ id: ++maxID, title: val, completed: false });
      this.reset();
    },
    del(id) {
      // 删除时根据索引来删除，会有bug？
      // 比如：在进行中列表中删除第二项，但是实际上allList的第二项为已完成状态
      let index = this.allList.findIndex(item => item.id == id);
      this.allList.splice(index, 1);
      this.reset();
    },
    clear() {
      this.allList = this.allList.filter(item => item.completed == false);
      this.reset();
    },
    screening(index) {
      if (index == 0) {
        this.todoList = this.allList;
      }
      if (index == 1) {
        this.todoList = this.allList.filter(item => item.completed == false)
      }
      if (index == 2) {
        this.todoList = this.allList.filter(item => item.completed == true)
      }
      this.status = index;
    },
    reset() {
      // 数据的变化驱动视图的变化
      // 前提:视图中得用到这个数据(依赖收集和派发更新)
      this.screening(this.status);
      localStorage.setItem("allList", JSON.stringify(this.allList));
    },
    quanbuwancheng() {
      if (this.flag == 0) {
        for (let i = 0; i < this.allList.length; i++) {
          this.allList[i].completed = true
        }
        this.flag = 1
      } else if (this.flag == 1) {
        for (let i = 0; i < this.allList.length; i++) {
          this.allList[i].completed = false
        }
        this.flag = 0
      }
      localStorage.setItem('allList', JSON.stringify(this.allList))
    }
  },
  computed: {
    sum() {
      return this.todoList.length;
    }
  }
}
</script>

<style>
</style>